<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.21.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="js/index1.css" />
    <!-- 引入组件库 -->
    <script src="js/index2.js"></script>
    <style>
        .el-header {
            text-align: center;
            color: #333;
            padding: 20px 0;
            font-size: 30px;
            margin-bottom: 20px;
        }

        .el-main {
            background-color: rgba(233, 238, 243, 0.5);
            color: #333;
            margin-top: 100px;
            text-align: center;
            padding: 20px;
        }

        .el-form-item {
            margin-bottom: 20px;
        }

        .el-input {
            width: 300px;
        }

        .el-radio-group {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .el-button {
            width: 150px;
            height: 50px;
            font-size: 18px;
            margin: 10px;
        }
    </style>
</head>

<body style="background-image: url(images/2.jpg); background-size: cover; overflow: hidden; ">
<div id="app">
    <el-container>
        <el-header>
            高校运动会管理系统
        </el-header>
        <el-container>
            <el-aside width="400px"></el-aside>
            <el-main>
                <el-form ref="form" label-width="80px">
                    <el-form-item>
                        <span style="font-size: 30px;">用户登录</span>
                    </el-form-item>
                    <el-form-item label="用户id" prop="username" style="margin-bottom: 10px;">
                        <el-input v-model="id" placeholder="请填入用户id"></el-input>
                    </el-form-item>
                    <el-form-item label="用户密码" prop="password">
                        <el-input type="password" v-model="password" placeholder="请填入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-radio-group v-model="role">
                            <el-radio label="2">运动员</el-radio>
                            <el-radio label="1">裁判</el-radio>
                            <el-radio label="0">管理员</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="login">登录</el-button>
                        <el-link href="register.html"><el-button type="danger">注册</el-button></el-link>
                    </el-form-item>
                </el-form>
            </el-main>
            <el-aside width="400px"></el-aside>
        </el-container>
    </el-container>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            id: "",
            password: "",
            role: ""
        },
        methods: {
            login() {
                axios.get(`/user/${this.id}/${this.password}/${this.role}`).then(res => {
                    if (res.data.message == "success") {
                        alert("登录成功")
                        window.location.href = "index.html"
                    } else {
                        alert("用户名或者密码错误")
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    })
</script>
</body>

</html>